<template>
  <div>
    <div class="cloud-box">
      <div class="cloud-title">
        <span class="cloudSpan">驻场工作需求描述</span>
        <div class="cloudSmallBox"></div>
      </div>
      <!-- ---from -->

      <el-form
        label-position="top"
        ref="ruleFormRef"
        :model="cloudFrom"
        :rules="rules"
        status-icon
        class="cloud-from"
      >
        <el-form-item label="项目名称" prop="name" class="prejectName">
          <el-input
            v-model="cloudFrom.name"
            placeholder="请输入项目名称"
            class="publicInput"
          />
        </el-form-item>

        <el-form-item
          label="技术类型与预算报价："
          prop="selectName"
          class="technology"
        >
          <el-select
            v-model="cloudFrom.selectName"
            placeholder="请选择技术类型"
          >
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="付费类型" prop="name" class="payType">
          <el-input
            v-model="cloudFrom.name"
            placeholder="请输入"
            class="publicInput payInput"
          />
          <span class="unit">K/天</span>
        </el-form-item>
        <!-- 4个需要输入的 -->
        <el-form-item class="fourInputList" v-if="fourInput.length">
          <div
            v-for="(item, index) in fourInput"
            :key="index"
            class="inputItem"
          >
            <el-input type="text" class="inputFirst" />
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">人</span>
            </div>
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">年工作经验</span>
            </div>
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">元/人天</span>
            </div>
            <el-icon color="#FC4C00" size="18"><RemoveFilled /></el-icon>
          </div>
        </el-form-item>
        <el-form-item label="驻场时间：" prop="name" class="payType">
          <el-input
            v-model="cloudFrom.name"
            placeholder="请输入"
            class="publicInput payInput"
          />
          <span class="unit">天</span>
        </el-form-item>
        <el-form-item label="教育背景：" prop="name" class="prejectName">
          <el-input
            v-model="cloudFrom.name"
            placeholder="输入后根据提示选择关键词"
            class="publicInput"
          />
        </el-form-item>
        <el-form-item label="工作时间：" prop="selectName" class="technology">
          <el-select
            v-model="cloudFrom.selectName"
            placeholder="请选择星期和时间"
          >
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="名企背景：" prop="name" class="prejectName">
          <el-input
            v-model="cloudFrom.name"
            placeholder="输入后根据提示选择关键词"
            class="publicInput"
          />
        </el-form-item>
        <el-form-item label="预算报价：" prop="selectName" class="technology">
          <el-select
            v-model="cloudFrom.selectName"
            placeholder="请选择预算报价"
          >
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="技能标签(1-5个)："
          prop="names"
          class="prejectName"
        >
          <el-input
            v-model="cloudFrom.names"
            placeholder="输入后根据提示选择关键词"
            class="publicInput"
          />
        </el-form-item>
        <el-form-item label="驻场地点：" prop="selectName" class="technology">
          <el-select
            v-model="cloudFrom.selectName"
            placeholder="请选择所在的区县"
          >
            <el-option label="Zone one" value="shanghai" />
          </el-select>
          <el-input
            v-model="cloudFrom.name"
            placeholder="请填写详细地址"
            class="siteTop publicInput"
          />
        </el-form-item>
        <el-form-item
          label="填写任务描述（简短的描述您的需求）："
          prop="selectName"
          class="technology"
        >
          <el-input v-model="cloudFrom.name" class="mission" />
        </el-form-item>
        <el-form-item label="住宿情况：" prop="selectName" class="technology">
          <el-radio-group v-model="cloudFrom.resource" class="radio">
            <el-radio label="是" />
            <el-radio label="否" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传附件：" prop="selectName" class="technology">
          <el-upload
            ref="uploadRef"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            drag
            :auto-upload="false"
          >
            <template #default>
              <div class="upload-demo">
                <el-button type="primary" class="btnIcon">
                  <el-icon><Download /></el-icon>
                </el-button>
                <span class="upload-text">
                  将文件拖到此处，或
                  <span class="upload-small">点击上传</span>
                  传需求文档
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- ---from -->
      <div class="submit">
        <el-button type="primary" class="save" @click="submitForm(ruleFormRef)"
          >暂时保存</el-button
        >
        <el-button
          type="primary"
          class="demand"
          @click="submitForm(ruleFormRef)"
          >提交需求</el-button
        >
      </div>
    </div>
  </div>
</template>
    <script setup>
import { ref, reactive } from "vue";
const ruleFormRef = ref();
const cloudFrom = ref({});
const fourInput = ref([{}, {}]);
const rules = reactive({
  name: [
    {
      required: true,
      message: "项目名称不能为空",
      trigger: "blur",
    },
  ],
  selectName: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "blur",
    },
  ],
});
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    console.log(valid, fields, "----");
  });
};
</script>
    
  <style lang="scss" scoped>
.cloud-box {
  margin-top: 35px;
  margin-bottom: 40px;
  padding: 0 24px;
  width: 1152px;
  min-height: 970px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 40px;
}

.cloud-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  position: relative;
  width: 170px;
  height: 60px;
  display: flex;
  align-items: center;
  .cloudSpan {
    position: absolute;
    bottom: 30px;
  }
  .cloudSmallBox {
    position: absolute;
    width: 144px;
    height: 6px;
    background: #fcc500;
  }
}
.cloud-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // gap: 0 40px;
}
// 项目名称
.prejectName {
  width: 556px;
}
// 技术类型
.technology {
  width: 556px;
}
// 付费类型
.payType {
  width: 459px;
  .payInput {
    width: 412px;
  }
  .unit {
    margin-left: 16px;
  }
}
// .4个需要输入的
.fourInputList {
  width: 556px;
  display: flex;
  flex-direction: column;
}
.inputItem {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.inputFirst {
  width: 118px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 6px;
}
.inputSecond {
  width: 68px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 6px;
}
.leftText {
  margin-left: 4px;
}

.mission {
  height: 88px;
}
.publicInput {
  height: 48px;
  background: #f5f7fa;
}
.radio {
  height: 48px;
}
.siteTop {
  margin-top: 8px;
}
.upload-demo {
  width: 532px;
  height: 148px;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}
.btnIcon {
  width: 40px;
  height: 40px;
}
.upload-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}
.upload-small {
  color: #165dff;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  text-transform: none;
}
.save {
  width: 88px;
  height: 38px;
  background: #fff;
  border-radius: 6px;
  color: #165dff;
}
.demand {
  width: 88px;
  height: 38px;
  background: #165dff;
  border-radius: 6px;
  color: #fff;
}
</style>
  <style scoped>
:deep(.el-select__wrapper) {
  min-height: 48px;
  background-color: #f5f7fa;
}
:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}
:deep(.el-upload-dragger) {
  background-color: #f5f7fa;
}
</style>
    